<template>
  <div >

    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <date-range-picker v-model="query.queryTime" valueFormat="timestamp" class="date-item"
                           @keyup.enter.native="crud.toQuery" @input="$forceUpdate()"
                           :picker-options="pickerOptions"
                           popper-class="picker-popper"
        />
        <rrOperation />
        <el-button type="primary" style="margin-bottom: 10px; vertical-align: middle;" size="mini" icon="el-icon-download" @click="downloadExcel">导出</el-button>
      </div>
      <crudOperation />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading"  :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <!--      <el-table-column prop="dealer_name" label="所属单位" width="200" />-->
      <el-table-column prop="ts"  label="GPS时间" width="140" fixed="left"/>
      <el-table-column prop="e33" label="车速-ECU车速" width="100" align="center"/>
      <el-table-column prop="e15" label="大气压力(kPa)" width="100" align="center"/>
      <el-table-column prop="e20" label="发动机实际扭矩(%)" width="100" align="center"/>
      <el-table-column prop="e24" label="标准摩擦扭矩百分比(%)" width="100" align="center"/>
      <el-table-column prop="e1" label="发动机转速(rpm)" width="150" align="center"/>
      <el-table-column prop="e8" label="发动机燃油消耗率(L/h)" width="100" align="center"/>
      <el-table-column prop="e35" label="上游NOx浓度(ppm)" width="100" align="center"/>
      <el-table-column prop="e36" label="下游NOx浓度(ppm)" width="100" align="center"/>
      <el-table-column prop="e37" label="反应剂余量(%)" width="100" align="center"/>
      <el-table-column prop="e38" label="进气量(kg/h)" width="100" align="center"/>
      <el-table-column prop="e39" label="SCR入口温度(°C)" width="100" align="center"/>
      <el-table-column prop="e40" label="SCR出口温度(°C)" width="100" align="center"/>
      <el-table-column prop="e41" label="DPF压差(kPa)" width="100" align="center"/>
      <el-table-column prop="e10" label="发动机冷却液温度(°C)" width="100" align="center"/>
      <el-table-column prop="e42" label="油箱液位(%)" width="100" align="center"/>
      <el-table-column prop="e43" label="设定的EGR阀开度(%)" width="100" align="center"/>
      <el-table-column prop="e44" label="实际的EGR阀开度(%)" width="100" align="center"/>

<!--          <el-table-column prop="engine_no" label="发动机工作时间（h）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="发动机机油液位（%）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="机油压力（kPa）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="累计里程（km）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="瞬时燃油消耗率（km/L）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="发动机输入电池电压（ V）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="累计油耗（L）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="油门开度（%）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="机油温度（°C）" width="100" align="center"/>-->
<!--          <el-table-column prop="engine_no" label="进气温度（°C）" width="100" align="center"/>-->

    </el-table>
    <!--分页组件-->
    <pagination />

    <v-chart :options="chartData" class="chart section" ref="chartA"/>

  </div>
</template>

<script>

import CRUD, { crud, form, header, presenter } from '@crud/V2/crud'
import crudOperation from '@crud/V2/CRUD.operation'
import pagination from '@crud/V2/Pagination'
import rrOperation from '@crud/V2/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'

import { getEcuDateList } from '@/api/jf/eqBiz'

export default {
  name: 'ecuHuida',
  components: { pagination, crudOperation, rrOperation,DateRangePicker },
  cruds() {
    return CRUD({ url: 'api/v2/biz/eq/getEcuHuida' })

  },
  mixins: [presenter(), header()],
  dictsV2: ['farms'],
  props: {
    eqObj: {
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    const _this = this
    return {
      badgeDate: ['2023-03-01', '2023-03-11', '2023-03-15'],
      pickerOptions: {
        cellClassName: (time) => {
          if (_this.badgeDate.includes(_this.parseTime(time, '{y}-{m}-{d}'))) {
            return 'badge'
          }
        }
      },
      syncLoading: false,
      eqCode: "",
      chartData: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
    }
  },
  watch: {
    'eqObj': {
      handler(newVal, oldVal) {
        const today = new Date(newVal.rcv_time);
        const yesterday = new Date(today.getTime() - 1000*60*60*24*7);
        this.query.queryTime = [new Date(yesterday.getUTCFullYear(),yesterday.getMonth(),yesterday.getDate(),"0","0","0").getTime(),new Date(today.getUTCFullYear(),today.getMonth(),today.getDate(),23,59,59).getTime()]
        this.query.eqCode = this.$route.params.eqCode
        this.crud.toQuery()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.crud.optShow = { add: false, edit: false, del: false, download: false }
    this.eqCode = this.$route.params.eqCode
    //初始化日期标记
    getEcuDateList({eqCode:this.eqCode}).then(data => {
      this.badgeDate = [];
      const _this = this
      if(data.data && data.data.length > 0){
        data.data.forEach(function(obj){
          _this.badgeDate.push(obj.date)
        })
        console.log("this.badgeDate",this.badgeDate)
      }
    })
    //初始化查询时间
    // const today = new Date();
    // const yesterday = new Date(today.getTime() - 1000*60*60*24);
    // // console.log(today.getDate())
    // // console.log(yesterday.getDay())
    // this.query.queryTime = [new Date(yesterday.getUTCFullYear(),yesterday.getMonth(),yesterday.getDate(),"0","0","0").getTime(),new Date(today.getUTCFullYear(),today.getMonth(),today.getDate(),23,59,59).getTime()]
    // this.query.eqCode = this.$route.params.eqCode
    // this.crud.toQuery()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if(this.query.queryTime) {
        this.query.start_ts = this.query.queryTime[0]
        this.query.end_ts = this.query.queryTime[1]
        return true
      }
      return false
    },
    [CRUD.HOOK.afterRefresh]() {
      console.log(this.crud.data);
      //加载表格数据
      const _this = this
      this.chartData.xAxis.data = [];

      this.chartData.legend.data = []
      this.chartData.series = [];
      //车速
      var serie1 = {}
      serie1.type="line"
      serie1.name="车速"
      this.chartData.legend.data.push("车速")
      serie1.data=[]
      serie1.stack='Total'
      var serie2 = {}
      serie2.type="line"
      serie2.name="大气压力"
      this.chartData.legend.data.push("大气压力")
      serie2.data=[]
      var serie3 = {}
      serie3.type="line"
      serie3.name="发动机实际扭矩"
      this.chartData.legend.data.push("发动机实际扭矩")
      serie3.data=[]
      var serie4 = {}
      serie4.type="line"
      serie4.name="标准摩擦扭矩"
      this.chartData.legend.data.push("标准摩擦扭矩")
      serie4.data=[]
      var serie5 = {}
      serie5.type="line"
      serie5.name="发动机转速"
      this.chartData.legend.data.push("发动机转速")
      serie5.data=[]
      var serie6 = {}
      serie6.type="line"
      serie6.name="燃油消耗率"
      this.chartData.legend.data.push("燃油消耗率")
      serie6.data=[]
      var serie7 = {}
      serie7.type="line"
      serie7.name="上游NOx浓度"
      this.chartData.legend.data.push("上游NOx浓度")
      serie7.data=[]
      var serie8 = {}
      serie8.type="line"
      serie8.name="下游NOx浓度"
      this.chartData.legend.data.push("下游NOx浓度")
      serie8.data=[]
      var serie9 = {}
      serie9.type="line"
      serie9.name="反应剂余量"
      this.chartData.legend.data.push("反应剂余量")
      serie9.data=[]
      var serie10 = {}
      serie10.type="line"
      serie10.name="进气量"
      this.chartData.legend.data.push("进气量")
      serie10.data=[]
      var serie11 = {}
      serie11.type="line"
      serie11.name="SCR入口温度"
      this.chartData.legend.data.push("SCR入口温度")
      serie11.data=[]
      var serie12 = {}
      serie12.type="line"
      serie12.name="SCR出口温度"
      this.chartData.legend.data.push("SCR出口温度")
      serie12.data=[]
      var serie13 = {}
      serie13.type="line"
      serie13.name="DPF压差"
      this.chartData.legend.data.push("DPF压差")
      serie13.data=[]
      var serie14 = {}
      serie14.type="line"
      serie14.name="发动机冷却液温度"
      this.chartData.legend.data.push("发动机冷却液温度")
      serie14.data=[]
      var serie15 = {}
      serie15.type="line"
      serie15.name="油箱液位"
      this.chartData.legend.data.push("油箱液位")
      serie15.data=[]
      var serie16 = {}
      serie16.type="line"
      serie16.name="设定的EGR阀开度"
      this.chartData.legend.data.push("设定的EGR阀开度")
      serie16.data=[]
      var serie17 = {}
      serie17.type="line"
      serie17.name="实际的EGR阀开度"
      this.chartData.legend.data.push("实际的EGR阀开度")
      serie17.data=[]

          // <el-table-column prop="e33" label="车速-ECU车速" width="100" align="center"/>
          // <el-table-column prop="e15" label="大气压力(kPa)" width="100" align="center"/>
          // <el-table-column prop="e20" label="发动机实际扭矩(%)" width="100" align="center"/>
          // <el-table-column prop="e24" label="标准摩擦扭矩百分比(%)" width="100" align="center"/>
          // <el-table-column prop="e1" label="发动机转速(rpm)" width="150" align="center"/>
          // <el-table-column prop="e8" label="发动机燃油消耗率(L/h)" width="100" align="center"/>
          // <el-table-column prop="e35" label="上游NOx浓度(ppm)" width="100" align="center"/>
          // <el-table-column prop="e36" label="下游NOx浓度(ppm)" width="100" align="center"/>
          // <el-table-column prop="e37" label="反应剂余量(%)" width="100" align="center"/>
          // <el-table-column prop="e38" label="进气量(kg/h)" width="100" align="center"/>
          // <el-table-column prop="e39" label="SCR入口温度(°C)" width="100" align="center"/>
          // <el-table-column prop="e40" label="SCR出口温度(°C)" width="100" align="center"/>
          // <el-table-column prop="e41" label="DPF压差(kPa)" width="100" align="center"/>
          // <el-table-column prop="e10" label="发动机冷却液温度(°C)" width="100" align="center"/>
          // <el-table-column prop="e42" label="油箱液位(%)" width="100" align="center"/>
          // <el-table-column prop="e43" label="设定的EGR阀开度(%)" width="100" align="center"/>
          // <el-table-column prop="e44" label="实际的EGR阀开度(%)" width="100" align="center"/>

      this.crud.data.forEach(function(obj){
        _this.chartData.xAxis.data.push(obj.ts)
        serie1.data.push(obj.e33)
        serie2.data.push(obj.e15)
        serie3.data.push(obj.e20)
        serie4.data.push(obj.e24)
        serie5.data.push(obj.e1)
        serie6.data.push(obj.e8)
        serie7.data.push(obj.e35)
        serie8.data.push(obj.e36)
        serie9.data.push(obj.e37)
        serie10.data.push(obj.e38)
        serie11.data.push(obj.e39)
        serie12.data.push(obj.e40)
        serie13.data.push(obj.e41)
        serie14.data.push(obj.e10)
        serie15.data.push(obj.e42)
        serie16.data.push(obj.e43)
        serie17.data.push(obj.e44)
      })

      this.chartData.series.push(serie1)
      this.chartData.series.push(serie2)
      this.chartData.series.push(serie3)
      this.chartData.series.push(serie4)
      this.chartData.series.push(serie5)
      this.chartData.series.push(serie6)
      this.chartData.series.push(serie7)
      this.chartData.series.push(serie8)
      this.chartData.series.push(serie9)
      this.chartData.series.push(serie10)
      this.chartData.series.push(serie11)
      this.chartData.series.push(serie12)
      this.chartData.series.push(serie13)
      this.chartData.series.push(serie14)
      this.chartData.series.push(serie15)
      this.chartData.series.push(serie16)
      this.chartData.series.push(serie17)

      console.log(this.chartData)

    },
    changeTime(e){
      this.$forceUpdate()
      // this.query.queryTime1 = e
    },

    // 入参 fmt-格式 date-日期
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    },
    parseTime(time, cFormat) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string')) {
          if ((/^[0-9]+$/.test(time))) {
            time = parseInt(time)
          } else {
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }

        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
        return value.toString().padStart(2, '0')
      })
      return time_str
    },
    downloadExcel(){
      this.crud.doExport()
    }
  }
}
</script>

<style scoped>


.chart{
  width: 1400px;
  height: 300px;
}
.section{
  padding:20px;
  background-color: white;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>

<style>
.picker-popper .el-date-table .badge::after {
  position: absolute;
  content: "";
  right: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
}
</style>
